<template >
  <div :style="{ '--themeColor': themeColor }">
    <NavBar title="详情" />
    <div class="shop-msg">
      <div class="head">
        <xhImg :src="shopInfo.logo" class="shop-img" />
        <div class="msg">
          <div class="title">
            {{ shopInfo.shopName || "" }}
          </div>
          <div class="subtitle">
            {{ industryType[shopInfo.industry] || "" }}
          </div>
        </div>
      </div>
      <div class="desc">
        <div class="public-title">描述</div>
        <!-- <div class="public-text">
          {{ shopInfo.desc || "无" }}
        </div> -->
        <u-read-more
          ref="uReadMore"
          :toggle="true"
          showHeight="44"
          closeText="更多"
          :shadowStyle="shadowStyle"
          textIndent="0"
        >
          <u-parse :content="shopInfo.desc || '无'" @load="load"></u-parse>
        </u-read-more>
      </div>
      <div class="dinner">
        <div class="public-title">
          {{ shopInfo.industry <= 100 ? "就餐方式" : "配送方式" }}
        </div>
        <div class="list">
          <div class="type" v-if="shopInfo.shopService.isEatShop">堂食</div>
          <div class="type" v-if="shopInfo.shopService.isPack">打包</div>
          <div class="type" v-if="shopInfo.shopService.isSelfPack">自提</div>
          <div class="type" v-if="shopInfo.shopService.isDelivery">
            外卖配送
          </div>
          <div class="type" v-if="shopInfo.shopService.isShopConsume">
            到店消费
          </div>
        </div>
      </div>
      <div class="address">
        <div class="public-title">地址</div>
        <div class="content">
          <div class="public-text">
            {{
              `${shopInfo.provinceCode || ""}${shopInfo.cityCode || ""}${
                shopInfo.areaCode || ""
              }${shopInfo.address || ""}`
            }}
          </div>
          <div
            class="icon iconfont icon-dingwei2"
            @click="
              $myTool.lookLocation(
                shopInfo.latitude,
                shopInfo.longitude,
                shopInfo.shopName,
                `${shopInfo.provinceCode}${shopInfo.cityCode}${shopInfo.areaCode}${shopInfo.address}`
              )
            "
          ></div>
        </div>
      </div>
      <div class="address">
        <div class="public-title">电话</div>
        <div class="content">
          <div class="public-text">{{ shopInfo.phone }}</div>
          <div
            class="icon iconfont icon-dianhua"
            @click="$myTool.callPhone(shopInfo.phone)"
          ></div>
        </div>
      </div>
      <div class="time">
        <div class="public-title">营业时间</div>
        <div class="open public-text">
          {{ shopInfo.openTimeStr || "" }}-{{
            shopInfo.closeTimeStr || ""
          }}
          (<span
            :style="{
              color:
                shopInfo && shopInfo.allStatus == 0 ? '#FFB72F' : '#f5f5f5',
            }"
            >{{ shopStatusOptions[shopInfo && shopInfo.allStatus] || "" }}</span
          >)
        </div>
      </div>
      <div class="yy" v-if="certification">
        <div class="public-title">商家资质</div>
        <div class="img" @click="handleShowImg(certification)">
          <xhImg :src="certification" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getShopDetail,
  getBusinessLicense,
} from "@/service/api/sp-store/index";
import { shopStatusObj } from "../../const";
import { mapState } from "vuex";
export default {
  onLoad(option) {
    option?.shopId ? this.getShopDetail(option?.shopId) : "";
  },
  data() {
    return {
      shopInfo: {},
      shopStatusOptions: shopStatusObj,
      certification: "",
      shadowStyle: {
        backgroundImage: "none",
        paddingTop: "0",
        marginTop: "0rpx",
      },
    };
  },
  computed: {
    ...mapState("sp-common/base", ["themeColor"]),
    ...mapState("sp-store/index", ["industryType"]),
  },
  methods: {
    getShopDetail(id) {
      getShopDetail({ id }).then((res) => {
        this.shopInfo = res;
        this.shopInfo.deliveryServiceConfig = JSON.parse(
          this.shopInfo.deliveryServiceConfig
        );
        setTimeout(() => {
          this.$nextTick(() => {
            this.$refs.uReadMore.init();
          });
        }, 500);
      });
      getBusinessLicense({ id }).then((res) => {
        this.certification = res;
      });
    },
    handleShowImg(value) {
      if (!value) return;
      let imgUrl = value;
      uni.previewImage({
        current: "",
        urls: [imgUrl],
      });
    },
  },
};
</script>

 <style lang="scss" scoped>
@import "@/pages/sp-store/css/shop-detail.scss";
</style>
